<template>
  <div class="page">
    <div class="login-panel">
      <div class="title">
        <span class="big">Mtime</span>
        <span class="small">影片库管理系统</span>
      </div>
      <div class="login-form">
        <div class="form-item">
          <div class="label">登录账户：</div>
          <input class="input" type="text" placeholder="请输入登录账户"/>
        </div>
        <div class="form-item">
          <div class="label">账户密码：</div>
          <input class="input" type="password" placeholder="请输入账户密码"/>
        </div>
        <div class="form-item">
          <div class="login-button">登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login"
}
</script>

<style scoped>
.page{
  width:100vw;
  height:100vh;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image:url("https://demos.creative-tim.com/light-bootstrap-dashboard-pro-angular2/assets/img/full-screen-image-3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.login-panel{
  background-color: #fff;
  width:450px;
  height:400px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  display:flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
}

.login-panel .title{
  margin-top:20px;
  font-weight:600;
  color:#fb404b;
}
.title .big{
  font-size:180%;
}
.title .small{
  color:#888;
  font-size:120%;
}
.login-form{
  margin-top:20px;
  width:90%;
}
.login-form .form-item{
  display: flex;
  flex-direction: column;
  margin-top:15px;
}
.form-item .label{
  margin-top:15px;
  margin-bottom:10px;
  font-size:110%;
}

.form-item .input{
  line-height:32px;
  border:none;
  border-bottom:1px solid #888888;
  outline: none;
  font-size:105%;
}
.login-button{
  width:100px;
  padding:10px 15px;
  text-align: center;
  background-color:#fb404b;
  color:#fff;
  margin:20px auto;
  cursor:pointer;
}
</style>